<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-21 19:08:03
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-23 01:49:24
-->
<template>
    <div>
        <el-form inline="true" ref="followUFormRef" :model="followUpForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>客户信息</div>
                    </div>
                </template>
                <div class="mescustomer">
                    <div class="mescustomerleft">
                        <el-form-item label="客户名称:">
                            <span>{{ followUpForm.customername }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="联系人:">
                            <span>{{ followUpForm.customercontact }}</span>
                        </el-form-item>
                        <el-form-item label=" 联系电话:" style="height:40px">
                            <span>{{ followUpForm.customerphone }}</span>
                        </el-form-item>
                        <el-form-item label="联系邮箱:">
                            <span>{{ followUpForm.customeremail }}</span>
                        </el-form-item>
                        <el-form-item label="公司职位:">
                            <span>{{ followUpForm.customerposition }}</span>
                        </el-form-item>
                        <el-form-item label="客户来源:">
                            <span>{{ followUpForm.customersource }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="客户等级:">
                            <span>{{ followUpForm.customerlevel }}</span>
                        </el-form-item>
                    </div>
                    <div class="mescustomerright">
                        <el-form-item label="性别:">
                            <span>{{ followUpForm.customersex }}</span>
                        </el-form-item>
                        <el-form-item label="生日:">
                            <span>{{ followUpForm.customerbirthday }}</span>
                        </el-form-item>
                        <el-form-item label="客户简介:" style="height:40px;oberflow:auto">
                            <span>{{ followUpForm.customerprofile }}</span>
                        </el-form-item>
                        <el-form-item label="所属地区:">
                            <span>{{ followUpForm.customerarea }}</span>
                        </el-form-item>
                        <el-form-item label="信用代码:">
                            <span>{{ followUpForm.creditcode }}</span>
                        </el-form-item>
                        <el-form-item label="跟进状态:">
                            <span>{{ followUpForm.followupstatus }}</span>
                        </el-form-item>
                        <el-form-item label="意向产品:">
                            <span>{{ followUpForm.intentionalproduct }}</span>
                        </el-form-item>

                    </div>
                </div>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>跟进信息</div>
                    </div>
                </template>
                <div class="boxHead">
                    <el-form-item label="跟进方式" prop="followupmethod">
                        <el-select v-model="followUpForm.followupmethod" placeholder="请选择跟进方式" clearable>
                            <el-option label="电话" value="TelephoneMarketing " />
                            <el-option label="微信" value="WeChatMarketing " />
                            <el-option label="拜访" value="visit" />
                            <el-option label="邮件" value="email " />
                            <el-option label="其他" value="Others" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="跟进时间" prop="followuptime">
                        <div style="width:180px">
                            <el-date-picker v-model="followUpForm.followuptime" type="date" placeholder="请选择跟进时间" clearable
                                style="width:100%" />
                        </div>
                    </el-form-item>
                </div>
                <el-form-item label="跟进内容" prop="followuptext" class="textArea">
                    <el-input v-model="followUpForm.followuptext" type="textarea" />
                </el-form-item>
            </el-card>
            <el-card class="buttonItem">
                <el-button type="primary" :loading="loading" @click="saveForm">保存</el-button>
                <el-button type="primary" @click="cancelSave">取消</el-button>
            </el-card>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus"
import { onMounted, reactive, ref } from "vue"
import { useCustomerIdInfo } from "../minehooks"
import { userCustomerFollowIDUpApi, userCustomerFollowUpApi } from "@/services/customer";
import { successMessage } from "@/utils/Tools/successMessage";
import { errorMessage } from "@/utils/Tools/errorMessage";
import type { ICustomerData } from "@/types/customer";
const followUFormRef = ref<FormInstance>()
const followUpForm = ref({
    customername: "",
    customercontact: "",
    customerphone: "",
    customeremail: "",
    customerposition: "",
    customersource: "",
    customerlevel: "",
    customersex: "",
    customerbirthday: "",
    customerprofile: "",
    customerarea: "",
    creditcode: "",
    followupstatus: "",
    intentionalproduct: "",
    followupmethod: "",
    followuptime: "",
    followuptext: ""
})

interface IProps {
    followId: number
    setDialogVisible: (visible: boolean) => void
}

const props = defineProps<IProps>()
//回显
onMounted(async () => {
    let ret = await userCustomerFollowIDUpApi(props.followId)
    console.log(ret.data.customer)
    Object.assign(followUpForm.value, ret.data.customer)
});
// 保存
const loading = ref(false)
const saveForm = () => {
    if (!followUFormRef.value) return
    loading.value = true
    followUFormRef.value.validate(async valid => {
        if (valid) {
            //这儿需要网络请求
            console.log(followUpForm)
            let ret = await userCustomerFollowUpApi(followUpForm)
            console.log(ret)
            if (ret.code === 200) {
                successMessage('添加用户成功', () => {
                    loading.value = false
                    props.setDialogVisible(false)
                }, 1000)
            } else {
                errorMessage('添加用户异常，请重新提交', () => {
                    loading.value = false
                }, 3000)
            }
        } else {
            errorMessage('表单验证失败', () => {
                loading.value = false
            }, 3000)
        }
    })
}
// 取消
const cancelSave = () => {
    if (!followUFormRef.value) return
    followUFormRef.value.resetFields()
}
const rules = reactive<FormRules<ICustomerData.IFollowUp>>({
    followupmethod: [{ required: true, whitespace: true, message: '跟进方式不能为空', trigger: 'blur' }],
    followuptime: [
        { required: true, whitespace: true, message: '跟进时间人不能为空', trigger: 'blur' },
    ],
    followuptext: [
        { required: true, whitespace: true, message: '跟进内容不能为空', trigger: 'blur' },
    ],
})
</script>

<style lang="scss" scoped>
.mescustomer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;

    .mescustomerleft {

        width: 50%;
        height: 100%;
        // background-color: red;
    }

    .mescustomerright {
        width: 50%;
        height: 100%;
        // background-color: blue;
    }

}

.boxHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-card {
    margin-bottom: 20px;


    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;

        .card-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }

}

.el-form-item {

    .el-input,
    .el-select,
    .el-date-picker,
    .el-date-editor.el-input,
    .el-form-item__content {
        width: 180px !important;
        margin-right: 20px; // Add margin between input fields if needed
    }
}

.textArea {
    width: 96%;
}

.el-date-picker {
    width: 180px !important;
}

.buttonItem {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button {
        margin: 0 10px; // Adjust margin as needed
    }
}
</style>